{include file="public/header" /}
<link rel="stylesheet" href="/static/admin/addons/builder/css/base.css" media="all">
<style>
    /* 用户列表开始 */
    .layadmin-caller {
        background: #fff;
        padding: 15px;
    }

    .layadmin-caller em {
        font-style: normal;
    }

    .layadmin-caller .caller-fl {
        float: left;
    }

    .layadmin-caller .caller-fr {
        float: right;
    }

    .layadmin-caller .caller-seach {
        position: relative;
        padding-bottom: 10px;
    }

    .layadmin-caller .caller-seach .caller-icon {
        font-size: 18px;
        position: absolute;
        top: 9px;
    }

    .layadmin-caller .caller-seach-icon {
        left: 6px;
    }

    .layadmin-caller .caller-dump-icon {
        right: 6px;
        cursor: pointer;
    }

    .layadmin-caller .caller-pl32 {
        padding: 0 32px;
    }

    .layadmin-caller .caller-tab {
        margin: 0;
    }

    /*.layadmin-caller .caller-contar {*/
    /*    padding-bottom: 20px;*/
    /*}*/

    .layadmin-caller .caller-contar .caller-item {
        padding: 15px 0 10px 0;
        overflow: hidden;
        border-bottom: 1px dashed #eee;
        height: 50px;
        line-height: 50px;
    }

    .layadmin-caller .caller-contar .caller-item .caller-main {
        margin-left: 15px;
    }

    .layadmin-caller .caller-contar .caller-item .caller-main p {
        line-height: 100%;
        padding: 8px 0;
    }

    .layadmin-caller .caller-contar .caller-item .caller-main p:first-child {
        padding-top: 0;
    }

    .layadmin-caller .caller-contar .caller-item .caller-main em {
        margin-left: 5px;
    }

    .layadmin-caller .caller-contar .caller-item .caller-main .caller-adds i {
        padding-right: 5px;
        margin: 0;
    }

    .layadmin-caller .caller-contar .caller-item .caller-main .caller-adds {
        color: grey;
        padding-bottom: 12px;
        font-size: 12px;
    }

    .layadmin-caller .caller-contar .caller-iconset i {
        margin: 0 5px;
    }

    .layadmin-caller .caller-contar .caller-iconset i:first-child {
        margin-left: 0;
    }

    .layadmin-caller .caller-contar .caller-img {
        width: 40px;
        height: 40px;
        border-radius: 100%;
    }

    .title {
        font-size: 15px;
        font-weight: bold;
    }

    .version {
        font-size: 12px;
        color: #a1a0a0;
    }

    .plugin {
        margin-top: 20px;
    }

    .lock {
        background: slateblue !important;
    }
</style>
<body>
<div class="layui-fluid layui-anim layui-anim-upbit">
    <div class="layui-card layadmin-caller">
        <p style="padding-bottom: 10px">
            <span class="layui-badge layui-bg-cyan">插件库版本：v8.2</span>


        </p>
        <form class="layui-form caller-seach" action="">
            <i class="layui-icon layui-icon-search caller-seach-icon caller-icon"></i>
            <input type="text" name="title" required="" lay-verify="required" placeholder="请输入标题"
                   autocomplete="off" class="layui-input caller-pl32">
            <i class="layui-icon layui-icon-close caller-dump-icon caller-icon"></i>
        </form>

        <div class="layui-tab layui-tab-brief caller-tab" lay-filter="tab">
            <ul class="layui-tab-title">
                <li class="layui-this">常规插件</li>
                <li>集成插件</li>

            </ul>
        </div>
        <div class="plugin"></div>
    </div>
</div>
<script id="load" type="text/html">
    <div style="text-align: center;">
        <i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i> 加载中....
    </div>
</script>
<script id="template" type="text/html">
    <%# for(var i = 0; i < d.data.length; i++){ %>
    <%# if(d.data[i].key != 'Plugin'){ %>
    <div class="caller-contar">
        <div class="caller-item">
            <img src="<% d.data[i].icon %>" alt="" class="caller-img caller-fl">
            <div class="caller-main caller-fl">
                <p class="title"><% d.data[i].title %>
                    <%# if(d.data[i].install == 2){ %><em class="version" style=" color: red;">新 <%
                        d.data[i].installedVersion %> → <% d.data[i].version %></em>
                    <%# } else { %>
                    <em class="version"><% d.data[i].version %></em>
                    <%# } %>
                </p>
                <p class="caller-adds"><% d.data[i].description %></p>
                <div class="caller-iconset"></div>
            </div>
            <div class="caller-fr">
                <%# if(d.data[i].locking == 1){ %>
                <button class="layui-btn layui-btn-danger layui-btn-sm" style="background: grey !important;">已锁定
                </button>
                <%# } else { %>
                    <%# if(d.data[i].install == 2){ %>
                    <button data-id="<% d.data[i].id %>" class="layui-btn layui-btn-sm update">更新</button>
                    <button data-id="<% d.data[i].id %>" class="layui-btn layui-btn-danger layui-btn-sm lock">锁定</button>
                    <button data-id="<% d.data[i].id %>" class="layui-btn layui-btn-danger layui-btn-sm uninstall">卸载
                    <%# } else if(d.data[i].install == 0) { %>
                    <button data-id="<% d.data[i].id %>" class="layui-btn layui-btn-sm layui-btn-normal install">安装
                    </button>
                    <%# } else { %>
                        <%# if(d.data[i].type == 1){ %>
                        <button data-id="<% d.data[i].id %>" class="layui-btn layui-btn-danger layui-btn-sm lock">锁定
                        </button>
                        <button data-id="<% d.data[i].id %>" class="layui-btn layui-btn-danger layui-btn-sm uninstall">卸载
                        </button>
                        <%# } else { %>
                        <button class="layui-btn layui-btn-primary layui-btn-sm">已安装
                        </button>
                        <%# } %>
                    <%# } %>
                <%# } %>
            </div>

        </div>
    </div>
    <%# } %>
    <%# } %>
</script>
</body>
{include file="public/footer" /}
<script>
    $(function () {
        var a = $, la = layui, lt = la.laytpl, tl = a("#template").html(), ly = la.layer,
            p = a('.plugin'), load = a("#load").html(), i = 1;
        const api = {
            get: '{:url("addons/getList")}',
            install: '{:url("addons/install")}',
            uninstall: '{:url("addons/uninstall")}',
            locking: '{:url("addons/locking")}',
            update: '{:url("addons/update")}'
        }

        lt.config({open: '<%', close: '%>'});
        p.html(load);
        fetch = function (type) {
            a.get(api.get, {type: type}, function (e) {
                lt(tl).render({data: e.data, type: type}, function (h) {
                    p.empty().html(h);
                });
                e.installPlugin ? a(".installPlugin").text(e.installPlugin) : '';
            });
        }
        fetch(1);
        la.element.on('tab(tab)', function (e) {
            p.html(load)
            fetch(e.index + 1);
            i = e.index + 1;
        });

        // 工具栏事件
        p.on('click', '.install', function () {
            return request(a(this).attr('data-id'), api.install, '确定要安装吗？', '插件下载中...');
        }).on('click', '.lock', function () {
            return request(a(this).attr('data-id'), api.locking, '锁定后，此插件将不再与服务器关联<br/>确定要锁定吗？');
        }).on('click', '.uninstall', function () {
            return request(a(this).attr('data-id'), api.uninstall, '确定要卸载此插件吗？');
        }).on('click', '.update', function () {
            return request(a(this).attr('data-id'), api.update, '确定要更新此插件吗？');
        });

        request = function (id, url, msg, text = '加载中...') {
            ly.confirm(msg, {title: '请确认'}, function (index) {
                ly.close(index);
                layerLoad(text)
                a.post(url, {id: id}, function (data) {
                    ly.closeAll();
                    ly.msg(data.msg);
                    if (data.code === 1) {
                        p.html(load)
                        fetch(i);
                    }
                });
            });
        }
    });
</script>